<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>资料上传</h2>
      </div>
      <div class="info-item">
        <div class="info-title">
          <img src="/@/assets/images/detail_title.png" alt="" />
          其他补充资料
        </div>
        <div class="info-content">
          <a-button class="submit submit1">上传附件</a-button>
        </div>
      </div>
      <div class="info-item">
        <div class="info-title">
          <img src="/@/assets/images/detail_title.png" alt="" />
          已上传资料列表
        </div>
        <div class="info-content">
          <a-table style="width: 100%; margin: auto" :pagination="false" :dataSource="dataSource" :columns="columns" :scroll="{ y: 290 }" />
          <div class="btns">
            <a-button class="cancel">清空当前页面</a-button>
            <a-button class="submit">确定</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, onBeforeMount, onMounted } from 'vue';
  import Back from '/@/components/go-back/index.vue';

  const dataSource = ref([
  
  ]);

  const columns = ref([
    {
      title: '类名',
      key: 'a',
      align: 'center',
      width: '25%',
      dataIndex: 'a',
    },
    {
      title: '文件名称',
      width: '25%',
      key: 'a',
      align: 'center',
      dataIndex: 'a',
    },
    {
      title: '操作',
      width: '25%',
      key: 'b',
      align: 'center',
      dataIndex: 'b',
    },

    {
      width: '25%',
      title: '应收金额（元）',
      key: 'c',
      align: 'center',
      dataIndex: 'c',
    },
  ]);
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 20rem;
    position: relative;
    .cancel {
      width: 270rem;
      height: 42rem;
      border-radius: 5rem;
    }
    .submit {
      width: 270rem;
      height: 42rem;
      background: #f55d4c !important;
      border-radius: 5rem;
    }
    .info-content {
      padding: 0 !important;
    }
    .submit1 {
      margin: 70rem 50% 120rem;
      transform: translateX(-50%);
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rem;
    }
    /deep/.ant-table-wrapper {
      .ant-table-thead > tr > th {
        background-color: #efefef !important;
      }
    }
  }
</style>
